<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Layer transform测试</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(["zrender", 'zrender/shape/Image'], function(zrender, ImageShape){

        // 初始化zrender
        var zr = zrender.init( document.getElementById("Main") );

        for( var i = 0; i < 10; i ++){
            for( var j = 0; j < 10; j++){
                var image = new ImageShape({
                    position : [i * 50, j * 50],
                    scale : [1, 1],
                    style : {
                        x : 0,
                        y : 0,
                        image : "test.jpeg",
                        width : 50,
                        height : 50
                    },
                    highlightStyle: {
                        width: 60,
                        height: 60,
                        x: -5,
                        y: -5
                    }
                });
                zr.addShape( image );
            }
        }
        zr.render();

        zr.modLayer(0, {
            panable: true,
            zoomable: true
        })
    })
    </script>
    <div id="Main" style="width:1000px;height:600px;"></div>
</body>
</html>